<!DOCTYPE html>
<html>
<head>
    {include file="layout:_meta_index" /}
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input type="text" name="sn" placeholder="订单号" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="listSearch">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="listTable" lay-filter="listTable"></table>
            <script type="text/html" id="buttonTpl">
                {{#  if(d.state == 1){ }}
                <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="change">接待订单</button>
                {{#  } else if(d.state == 2){ }}
                <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="change">已接订单</button>
                {{#  } else if(d.state == 3){ }}
                <button class="layui-btn  layui-btn-xs" lay-event="change">完成订单</button>
                {{#  } else { }}
                <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="change">订单取消</button>
                {{#  } }}
            </script>
            <script type="text/html" id="buttonTp2">
                {{#  if(d.pay_state == 1){ }}
                <button class="layui-btn layui-btn-xs" lay-event="pay">已付款</button>
                {{#  } else { }}
                <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="pay">未付款</button>
                {{#  } }}
            </script>
            <script type="text/html" id="buttonTp3">
                {{#  if(d.is_verify == 1){ }}
                <button class="layui-btn layui-btn-xs" lay-event="verify">已核验</button>
                {{#  } else { }}
                <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="verify">未核验</button>
                {{#  } }}
            </script>
            <script type="text/html" id="listTableBar">
                {{#  if(d.state == 1 && d.pay_state == 0){ }}
                <!--订单未付款，未接待时可修改--->
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
                {{#  } }}
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="addRowTable">详情</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="give">赠送</a>
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="cancel">订单取消</a>
            </script>
        </div>
    </div>
</div>
{include file="layout:_footer" /}
<script>
    var del_url = '{:url("order/remove")}';
    var add_url = '{:url("order/handle_edit")}';
    var change_url = '{:url("order/change")}';
    var pay_url = '{:url("order/pay")}';
    var verify_url = '{:url("order/verify_url")}';
    var discount_url = '{:url("order/discount_url")}'; //打折
    var give_url = '{:url("order/give_url")}'; //赠送
    layui.config({
        base: '__static__/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table','common'], function(){
        var $ = layui.$
            ,common = layui.common
            ,form = layui.form
            ,table = layui.table;

        //数据列表
        table.render({
            elem: '#listTable',
            url : "{:url('order/handle_order')}",
            toolbar: '#listTableToolbar',
            totalRow: true ,//开启合计行
            cols : [[
                // {type: 'checkbox'},
                {field: 'id', title: 'ID', align:"center"},
                {field: 'sn', title: '订单编号', align:'center'},
                {field: 'user_id', title: '用户', align:'center'},
                {field: 'table', title: '房间/桌号', align:'center'},
                {field: 'price', title: '成交金额', align:'center',totalRow: true},
                {field: 'discount', title: '折扣',edit: 'text',align:'center'},
                {field: 'total_price', title: '订单金额', align:'center',totalRow: true},
                {field: 'create_time', title: '添加时间', align:'center'},
                {field: 'state', title: '订单状态', align:'center',templet: '#buttonTpl',width:100},
                {field: 'is_verify', title: '核验', align:'center',templet: '#buttonTp3',width:100},
                {field: 'state', title: '付款状态', align:'center',templet: '#buttonTp2',width:100},
                // {
                //     field: 'btn',
                //     align: 'center',
                //     title:'订单详情',
                //     templet: function (d) {
                //         return '<a style="width: 100%; height: 100%;cursor: pointer;color: red" lay-event="addRowTable">点击展开</a>'
                //     }
                // },
                {title: '操作', fixed:"right",align:"center",templet:'#listTableBar',width:300}

            ]],
            page: true, //是否显示分页
            limits:[10,15,20,25,30],//显示
            limit: 15 //每页默认显示的数量
            ,height: document.documentElement.clientHeight/5*4
        });

        //监听搜索
        common.tableSearch('listSearch','listTable');

        //列表操作
        table.on('tool(listTable)', function(obj){
            var layEvent = obj.event, data = obj.data;
            var $this = $(this);
            var tr = $this.parents('tr');
            var trIndex = tr.data('index');

            if(layEvent === 'del'){ //删除
                common.tableDelete(del_url,data.id,'listTable');
            }else if (layEvent==='edit'){
                common.adminShow(add_url+'?id='+data.id,"编辑",'80%','80%','addEdit','listTable');
            }else if(layEvent==='addRowTable'){
                // 外围的table的id + tableIn_ + 当前的tr的data-index
                $(this).attr('lay-event', 'fold').html('<font color="#FFF">关闭</font>');
                var tableId = 'tableOut_tableIn_' + trIndex;
                var _html = [
                    '<tr class="table-item">',
                    '<td colspan="' + tr.find('td').length + '" style="border: #40AFFE 2px solid; padding: 5px;">',
                    '<table id="' + tableId + '" ></table>',
                    '</td>',
                    '</tr>'
                ];
                console.log(data,'=====================>字段<');
                tr.after(_html.join('\n'));
                // 渲染table
                table.render({
                    elem: '#' +tableId,
                    data: data.goods||[],
                    width:'100%',
                    page:true,
                    totalRow: true ,//开启合计行
                    cols: [[
                        {field:'id', title: 'id',width:150},
                        {field:'goodsname', title: '商品名称',width:200},
                        {field:'goods_attr', title: '规格',width:200},
                        {field:'goods_price', title: '价格',totalRow: true,width:150},
                        {field:'goods_num', title: '数量',width:150},
                        {field:'total_price', title: '价格小计',totalRow: true,width:150},
                    ]],

                });
                // $(window).resize();

            }else if (layEvent === 'fold') {
                $(this).attr('lay-event', 'addRowTable').html('<font color="#FFF">详情</font>');
                tr.next().remove();
            }
            else if(layEvent==='change'){
                var state =2;
                var msg = '确定要处理订单？';
                common.tableStatus(change_url,{id:data.id,state:state},'listTable',msg);
            }else if(layEvent==='cancel'){
                var state = 0;
                var msg = '确定要取消订单？';
                common.tableStatus(change_url,{id:data.id,state:state},'listTable',msg);
            }else if(layEvent==='pay'){
                var state =1;
                if(data.pay_state == 0) {
                    var msg = '确定付款？';
                    common.tableStatus(pay_url, {id: data.id, state: state}, 'listTable', msg);
                }else{
                    layer.msg('订单已付款');
                }
            } else if(layEvent==='verify'){
                var state =data.is_verify;
                var msg = '核验订单';
                if(state == 0) {
                    common.tableStatus(verify_url, {id: data.id, state: state}, 'listTable', msg);
                }else{
                    layer.msg('订单已核验');
                }
            }else if (layEvent==='give'){  //赠送
                common.adminShow(give_url+'?id='+data.id,"赠送",'80%','80%','addEdit','listTable');
            }
            //end

        });

        //监听单元格编辑  -  打折
        table.on('edit(listTable)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data; //得到所在行所有键值
                // ,field = obj.field; //得到字段
            common.tableStatus(discount_url, {'id': data.id, 'discount': value}, 'listTable', '是否打折');
            // layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ value);
        });

        //列表工具栏操作
        table.on('toolbar(listTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'del':common.tableDelete(del_url,checkStatus.data,'listTable');break;
                case 'add':common.adminShow(add_url,"添加",'80%','80%','addEdit','listTable');break;
            }
        });


    });
</script>
</body>
</html>

